<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/antv-g2/4.1.46/g2.min.js" type="application/javascript"></script>
</head>
<body>


    <div id="ct"></div>

    <button id="abc">  调整图表的大小 </button>
    <button id="efg">  动态的设置 数据 </button>

    <script>

        // 实例化一个图表
        const chart = new G2.Chart({
            container: document.getElementById('ct'),
            width: 600,
            height: 600,
            // padding:100,
            renderer:'svg',
            theme:'dark',
        });

        // 数据
        const data = [
            { year: '1951 年', sales: 38 },
            { year: '1952 年', sales: 52 },
            { year: '1956 年', sales: 61 },
            { year: '1957 年', sales: 145 },
            { year: '1958 年', sales: 48 },
            { year: '1959 年', sales: 38 },
            { year: '1960 年', sales: 38 },
            { year: '1962 年', sales: 38 },
         ];

         // 置入数据
         chart.data(data);


         chart.scale('sales', {
            min:0,
            max:500
         });

        chart.tooltip({
            showMarkers: false
        });
        chart.interaction('active-region');

        chart.interval().position('year*sales');


        // 执行渲染
        chart.render();



        document.querySelector('#abc').onclick=()=>{
            chart.changeSize(400,200)
        }

        document.querySelector('#efg').onclick=()=>{
            chart.changeData([
            { year: '1951 年', sales: 10 },
            { year: '1952 年', sales: 24 },
            { year: '1956 年', sales: 24 },
            { year: '1957 年', sales: 200 },
            { year: '1958 年', sales: 148 },
            { year: '1959 年', sales: 128 },
            { year: '1960 年', sales: 98 },
            { year: '1962 年', sales: 68 },
         ])
        }

   

    </script>





    
</body>
</html>